<!--
 * Copyright © 2022 XXXXXXXXX
 * @Author: zhangxiang
 * @Date: 2022-09-14 15:29:24
 * @LastEditors: zhangxiang
 * @LastEditTime: 2022-11-03 10:02:32
 * @Description:
 *
-->

<template>
  <div ref="eventTotal" class="event-total-ctn">
    <!-- 图表 -->
    <div
      v-if="ctnHeight > 0"
      id="total-pie"
      :style="{ width: ctnHeight + 'px', height: ctnHeight + 'px' }"
    ></div>
    <!-- 图例 -->
    <div class="legend" :style="{ width: ctnHeight * 0.8 + 'px' }">
      <div class="item">
        <div class="icon"></div>
        <div class="text">Normal</div>
        <div class="num">{{ total.normal }}</div>
      </div>
      <div class="item">
        <div class="icon warning"></div>
        <div class="text">Warning</div>
        <div class="num">{{ total.warning }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

const COLORS = ['#0091FF', '#FCD526'] // 颜色

export default {
  name: 'EventTotal',
  props: {
    // 数据
    total: {
      type: Object, // 类型
      required: true, // 必须
      default: function() {
        // 默认值
        return {
          warning: 0,
          normal: 0,
          total: 0
        }
      }
    }
  },
  data() {
    return {
      chart: null, // 图表
      ctnHeight: -1 // 容器高度
    }
  },
  computed: {
    /**
     *
     * @description: 饼图数据
     * @return {*}
     *
     */
    seriesData() {
      return [
        {
          name: 'Normal', // 名称
          value: this.total.normal, // 数值
          itemStyle: { color: COLORS[0] } // 样式
        },
        {
          name: 'Warning', // 名称
          value: this.total.warning, // 数值
          itemStyle: { color: COLORS[1] } // 样式
        }
      ]
    }
  },
  watch: {
    /**
     *
     * @description: 监听seriesData
     * @return {*}
     *
     */
    seriesData: {
      handler: function(newValue, oldValue) {
        this.$nextTick(() => {
          this.initChart() // 初始化表
        })
      },
      deep: true,
      immediate: true
    }
  },
  mounted() {
    this.ctnHeight = this.$refs.eventTotal.clientHeight // 获取高度
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    /**
     *
     * @description: 设置饼图
     * @return {*}
     *
     */
    setChartOption() {
      this.chart.setOption(
        {
          tooltip: {
            // 提示条
            trigger: 'item', // 触发
            position: 'right' // 位置
          },
          title: {
            // 标题
            show: true, // 显示
            left: 'center',
            top: 'middle',
            text: this.total.total, // 文字
            textStyle: {
              // 标题样式
              color: '#4A4A4A', // 颜色
              fontWeight: 'bold', // 字重
              fontSize: 22 // 大小
            },
            itemGap: 0, // 标题和子标题间距
            subtext: '事件总数', // 子标题
            subtextStyle: {
              // 子标题样式
              color: '#C3C3C3', // 颜色
              fontSize: 12 // 大小
            }
          },
          series: [
            {
              name: this.title,
              type: 'pie', // 类型
              center: ['50%', '50%'], // 圆环中心
              radius: ['46%', '85%'], // 圆环宽度
              avoidLabelOverlap: false,
              label: {
                // 文本样式
                show: false, // 显示
                position: 'inside', // 位置
                formatter: '{d}%', // 格式化
                backgroundColor: 'rgba(38, 38, 38, 0.2)', // 背景色
                width: 60, // 宽度
                height: 23, // 高度
                align: 'center', // 居中
                verticalAlign: 'middle', // 居中
                borderRadius: 11, // 边框半径
                fontSize: 14, // 大小
                color: '#FFF' // 颜色
              },
              emphasis: {
                // 圆环选中
                scaleSize: 13 // 放大尺寸
              },
              labelLine: {
                show: false
              },
              data: this.seriesData // 数据
            }
          ]
        },
        true
      )
    },
    /**
     *
     * @description: 初始化图表
     * @return {*}
     *
     */
    initChart() {
      if (!this.chart) {
        this.chart = echarts.init(document.getElementById('total-pie')) // 初始化
      }
      this.setChartOption() // 设置图表
    }
  }
}
</script>

<style lang="less" scoped>
@import "@/assets/css/common.less";
.event-total-ctn {
  position: relative;
  #total-pie {
    height: 100%;
    position: absolute;
    left: 0%;
    top: 0%;
  }
  .legend {
    position: absolute;
    right: 20px;
    bottom: 10px;

    .item {
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      &:last-child {
        margin-bottom: 0;
      }

      .icon {
        width: 14px;
        height: 14px;
        background: #0091ff;
        border-radius: 50%;
        margin-right: 4px;
        &.warning {
          background: #fcd526;
        }
      }
      .text {
        .textStyle(14px, 500, #C3C3C3);
        line-height: 20px;
      }
      .num {
        .textStyle(14px, 600, #4a4a4a);
        line-height: 20px;
        margin-left: auto;
      }
    }
  }
}
</style>
